<template>
  <div class="container" ref="mainCon">
    <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
      <el-form :inline="true" :model="filterField">
        <el-col :lg="8" :xl="6">
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="6">
          <el-form-item label="行业" class="row-padding-bottom">
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="advanced">
          <el-col :lg="8" :xl="6">
            <el-form-item label="奖惩情况" class="row-padding-bottom">
              <el-select
                v-model="filterField.status"
                filterable
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in statusOption"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="企业名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.companyName"
                placeholder="请输入企业名称或统一社会信用代码"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="奖惩时间" class="row-padding-bottom">
              <timeSelection
                @getStartTimeValue="getStartTimeValue"
                @getEndTimeValue="getEndTimeValue"
              ></timeSelection>
            </el-form-item>
          </el-col>
        </template>
        <el-col :lg="8" :xl="6">
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <!-- <el-button class="commonBut saveBtn funComBut bzjAddJc" icon="icon iconfont icontianjia" @click="toAdd()">
                                <span class="opetareText">添加企业奖惩</span>
                            </el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="spacing"></div>
    <!-- 表格 -->
    <div
      ref="tableBox"
      :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
    >
      <div style="margin-bottom: 24px">
        <el-button
          class="commonBut saveBtn funComBut bzjAddJc"
          icon="icon iconfont icontianjia"
          @click="toAdd()"
        >
          <span class="opetareText">添加企业奖惩</span>
        </el-button>
      </div>
      <el-table
        ref="tableBox1"
        @sort-change="sortChange"
        :max-height="tableHeight"
        @selection-change="handleSelectionChange"
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="companyName"
          label="奖惩企业名称"
          :formatter="formatTd"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.companyName"
              :columnName="'companyName'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="uscc"
          label="统一社会信用代码"
          align="center"
          :formatter="formatTd"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          :formatter="formatTd"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.projectName"
              :columnName="'projectName'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="奖惩时间"
          sortable="custom"
          align="center"
          :formatter="formatTd"
          min-width="140px"
        ></el-table-column>
        <el-table-column
          prop="areaName"
          label="监管区域"
          align="center"
          :formatter="formatTd"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="industryName"
          label="行业"
          align="center"
          :formatter="formatTd"
          min-width="120px"
        ></el-table-column>
        <el-table-column
          prop="statusDesc"
          label="奖惩情况"
          align="center"
          :formatter="formatTd"
          min-width="160"
        ></el-table-column>
        <el-table-column label="操作" align="left" fixed="right" width="190px">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看</el-link
              >
              <el-link type="primary" @click="toUpdate(scope.row)"
                >编辑</el-link
              >
              <el-link type="primary" @click="toDelete(scope.row)"
                >删除</el-link
              >
            </div>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'enterpriseRewardAndPunish',
  components: {},
  computed: {
    ...mapState(['areasOptions', 'industryOptions']),
  },
  props: {
    status: {
      type: String,
    },
  },
  data() {
    return {
      areaId: '', //区域
      tableList: [],
      requestUrl: 'api-r/reward/expand/list',
      //搜索条件
      filterField: {
        areaId: '', //区域
        industryId: '', //行业
        status: '',
        companyName: '', //企业名称
        projectName: '', //项目名称
        searchDateStart: '',
        searchDateEnd: '',
        type: 'COMPANY',
      },
      statusOption: [],
      isShow: false, //列表加载
      loading: true,
      advanced: false,
      tableHeight: null,
      hiddleToolBar: false,
    }
  },
  created() {
    this.filterField.status = this.status || ''
    // alert(111,this.status)
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})
    this.getStateOption()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    ...mapActions(['getAreas', 'getIndustry']),
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getStateOption() {
      this.axios({
        method: 'post',
        url: 'api-r/reward/expand/findstatusenum',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.statusOption = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.searchDateStart = val
      } else {
        this.filterField.searchDateStart = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.searchDateEnd = val
      } else {
        this.filterField.searchDateEnd = ''
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    //跳转详情
    toDetail(row) {
      this.$router.push({
        path: '/home/events/enterpriseRewardAndPunishDetail',
        name: 'enterpriseRewardAndPunishDetail',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/rewardAndPunish',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toDelete(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delRewardAndPunish(row)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        })
    },
    delRewardAndPunish(row) {
      this.axios({
        method: 'get',
        url: 'api-r/reward/expand/delete?id=' + row.id,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toAdd() {
      this.$router.push('/home/events/addReward')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/rewardAndPunish',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUpdate(row) {
      this.$router.push({
        path: '/home/events/addReward',
        name: 'addReward',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/rewardAndPunish',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 246

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  padding-top: 24px;
}
@import '../../../static/css/filterArea.less';
</style>
